<template>
    <div class="classification-box">
        <!-- 分类页 -->
        <div class="classification-content">
            <ClassificationListBar class="content-list" ref="contentList" :typeLists="classifyPage.typeLists"
                @update:key="resetHotTypes"
            ></ClassificationListBar>
            <!-- <ClassificationDetailBar class="content-detail"></ClassificationDetailBar> -->
            <div class="content-detail" ref="contentDetail">
                <div>
                    <HotBar class="content-detail-type" :rowNum="3" :types="classifyPage.hotTypes"></HotBar>
                    <div class="content-detail-list">
                        <!-- 两种取样式方法 -->
                        <!-- <p :class="sortList=='pop'?'active-color':''" @click="sendSort('pop')">综合</p>
                        <p :class="sortList=='sell'?'active-color':''" @click="sendSort('sell')">销量</p>
                        <p :class="sortList=='new'?'active-color':''" @click="sendSort('new')">新品</p> -->
                        <p :class="{'active-color':sortList=='pop'}" @click="sendSort('pop')">综合</p>
                        <p :class="{'active-color':sortList=='sell'}" @click="sendSort('sell')">销量</p>
                        <p :class="{'active-color':sortList=='new'}" @click="sendSort('new')">新品</p>
                    </div>
                    <LikeBar class="content-detail-like" :types="classifyPage.likeTypes"></LikeBar>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import ClassificationListBar from "../components/classificationListBar";
// import ClassificationDetailBar from "../components/classificationDetailBar";
import HotBar from "../components/hotBar";
import LikeBar from "../components/likeBar";

import BScroll from "better-scroll";

import {mapState,mapActions} from "vuex";
export default {
    components: {
        ClassificationListBar,
        // ClassificationDetailBar,
        HotBar,
        LikeBar
    },
    data(){
        return{
            sortList:"pop",
            miniWallkey:"",
            // sortColor:{
            //     "active-color":true
            // }
        }
    },
    computed:{
        ...mapState(["classifyPage"])
    },
    methods:{
        initScroll(){
            var scroll1=new BScroll(this.$refs.contentList.$el,{
                click:true
            });
            var scroll2=new BScroll(this.$refs.contentDetail,{
                click:true
            });
        },
        ...mapActions(["loadTypeLists","loadTypesByMaitKey","loadGoodListByMiniWallKey"]),
        resetHotTypes(arg1,arg2){
            // console.log(arg1);
            this.loadTypesByMaitKey(arg1);
            this.loadGoodListByMiniWallKey({fcid:arg2,sort:"pop"});
            this.miniWallkey=arg2;
            this.sortList="pop";
        },
        sendSort(arg){
            this.sortList=arg;
            this.loadGoodListByMiniWallKey({fcid:this.miniWallkey,sort:arg});
        }
    },
    mounted(){
        this.initScroll();
        this.loadTypeLists();
        // this.loadGoodListByMiniWallKey();
        // this.loadTypesByMaitKey();
        // console.log(this.$refs.contentList.$el);
        // console.log(this.$refs.contentDetail);
        // console.log(this);
    }
};
</script>
<style lang="less" scoped>
//分类页样式
.classification-box {
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 0rem;
    right: 0rem;
    // overflow-y: auto;
}
//分类内容样式
.classification-content {
    display: grid;
    grid-template-columns: 1fr 3fr;
    > .content-list {
        grid-column-start: 1;
        grid-column-end: 2;
        background-color: rgba(0, 0, 0, 0.1);
        // overflow-y: auto;
        height:1134px;
        width:100%;
    }
    > .content-detail {
        grid-column-start: 2;
        grid-column-end: 5;
        width:100%;
        height:1134px;

        // overflow-y: auto;
        .content-detail-type {
            width: 100%;
            display: flex;
            flex-flow: row wrap;
        }
        .content-detail-list {
            width: 100%;
            display: flex;
            justify-content: space-around;
            box-sizing: border-box;
            padding: 0.3rem 0rem;
            border-top: 1px solid @gray;
            border-bottom: 1px solid @gray;
            > p {
                padding: 0rem 0.5rem;
                border-right: 1px solid @gray;
                font-weight: bold;
                font-size: 0.4rem;
            }
            // > p:first-child {
            //     color: @pink;
            // }
            > p:last-child {
                border: 0px solid @gray;
            }
        }
        .content-detail-like {
            width: 100%;
            display: flex;
            flex-flow: row wrap;
        }
    }
}
.active-color{
    color:@pink;
}
</style>